<template>
  <div>
    <div class="menus">
      <div class="title">欢迎使用吸粉神器后台管理系统！</div>
      <div class="list">
        <router-link to="/demo">
          <div>
            <i class="iconfont icon-caidan"></i>
          </div>
          <div>demo</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import vPageTitle from "../common/PageTitle";
export default {
  name: "menus",
  components: {
    vPageTitle
  },
  data() {
    return {
      showNav: false
    };
  },
  created() {
    this.showNav = localStorage.getItem("type") == 1 ? true : false;
  }
};
</script>

<style lang="less" scoped>
.menus {
  color: #333333;

  .title {
    margin: 50px 30px;
    font-size: 30px;
  }

  .list {
    margin: 10px 20px;
    display: flex;
    justify-content: flex-start;
    a {
      display: block;
      width: 180px;
      height: 220px;
      box-sizing: border-box;
      background: #fff;
      box-shadow: 0px 10px 32px 0px rgb(125, 125, 125);
      border-radius: 10px;
      text-align: center;
      padding-top: 20px;
      margin-left: 50px;
      i {
        color: #168ffe;
        font-size: 100px;
      }
      div:last-child {
        color: #168ffe;
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
      }
    }
    a:hover {
    }
  }
}
</style>
